Denoflareを使ってCloudflare WorkersをTypescriptで実装する
Introduction
先日書いたこの記事では、
Cloudflare Workers公式のCLIツールであるWranglerを使って
RustのWorkersをデプロイしました。
今回はWorkersをTypeScriptで書きたいと思い、
いい方法がないか探していたところ、Denoflareという、
DenoをつかってCloudflare Workersの開発やデプロイを実施するためのツールを見つけました。
これを使えば自分でwebpack使ったりesbuild使ったりして
ごにょごにょする必要ががなくなります。
また、Denoflareを使うなら、wrangler/node/webpackなどは必要ありません。
※Denoは必要ですが
ではDenoflareのインストールからWorkersのへpublishまでやってみましょう。
Denoflare?
Denoflareは、Cloudflare Workersの開発やデプロイを簡単にするCLIツールです。
特徴はここにあります。
以下要約。
- ローカルでの開発/テストが簡単(denoflare serve)
- TypeScriptのWorkersモジュールを簡単にCloudflareにデプロイ(denoflare push)
- production用のWorkersをCLIから監視（denoflare tail)
- Cloudflare Pagesのstati siteを生成(denoflare site)
あと、Cloudflare Rest APIが呼べたり
R2ストレージ操作ができたり、durable-objects/R2のコスト統計がみれたりします。
Environment
- MacBook Pro (13-inch, M1, 2020)
- OS : MacOS 11.3.1
- Deno : 1.22.0
Setup
まずはDenoのインストール。
% curl -fsSL https://deno.land/x/install/install.sh | sh ・・・ % deno --version deno 1.22.0 (release, aarch64-apple-darwin) v8 10.0.139.17 typescript 4.6.2
参考:https://deno.land/manual@v1.22.0/getting_started/installation
続いてDenoflareのインストール。
% deno install --unstable --allow-read --allow-net --allow-env --allow-run --name denoflare --force \
https://raw.githubusercontent.com/skymethod/denoflare/v0.5.1/cli/cli.ts
✅ Successfully installed denoflare
/path/your/.deno/bin/denoflare
ℹ️ Add /path/your/.deno/bin to PATH
export PATH="/path/your/.deno/bin:$PATH"
自分の場合はzshrcに.deno/binパスを追加しました。
% denoflare --help
denoflare 0.5.1
USAGE:
denoflare <command> <args> <options>
・・・
これでインストールOKです。
Create Cloudflare Workers
適当なディレクトリをつくってそこにDenoflareの設定ファイル(.denoflare)を作成。
// .denoflare
{
"$schema": "https://raw.githubusercontent.com/skymethod/denoflare/v0.5.1/common/config.schema.json",
"scripts": {
"hello-denoflare": {
"path": "index.ts",
"bindings": {
"SUFFIX": {
"value": "is a genius!"
}
},
"localPort": 3030
}
},
"profiles": {
"account1": {
// your cloudflare account id
"accountId": "<YOUR ACCOUNT ID>",
// your cloudflare api token
"apiToken": "<YOUR API TOKEN>"
}
}
}
scriptsでWorkersの定義を行います。
また、bindingsを使うとWorkers内で参照したい値をバインドすることができます。
↑の場合、ts内で「${env.SUFFIX}」とすればvalueが参照可能です。
accountId idはCloudflare Workersのダッシュボード右側で確認できます。
また、api tokenはここで作成可能なので、
取得してそれぞれ記述しておきましょう。
次にWorkersで動かしたいモジュールのtsを作成。
// index.ts
export default {
async fetch(request: Request, env: any) {
const url = new URL(request.url)
const search = new URLSearchParams(url.search)
const name = search.get('name') || 'Somebody'
try {
return new Response(`${name} ${env.SUFFIX}`)
} catch (e) {
return new Response(e.message)
}
},
}
クエリパラメータ(name)から値を取得して文字列を返すだけです。
serveコマンドを使うとローカルで動作確認できます。
% denoflare serve hello-denoflare Compiling https://raw.githubusercontent.com/skymethod/denoflare/v0.5.1/cli-webworker/worker.ts into worker contents... Bundled https://raw.githubusercontent.com/skymethod/denoflare/v0.5.1/cli-webworker/worker.ts (process) in 605ms runScript: index.ts Bundled index.ts (process) in 217ms worker: start Started in 850ms (isolation=isolate) Local server running on http://localhost:3030
curlで動作確認。
なお、index.tsを変更して保存すれば、そのまま変更が反映されます。
% curl -i http://localhost:3030/\?name\=syuta HTTP/1.1 200 OK content-type: text/plain;charset=UTF-8 vary: Accept-Encoding content-length: 18 date: Fri, 03 Jun 2022 03:31:28 GMT syuta is a genius!%
Workersへpush
ローカルで動いたので、Cloudflareにデプロイしてみます。
pushコマンドで名前を指定すればアップロード。
% denoflare push hello-denoflare bundling hello-denoflare into bundle.js... bundle finished (process) in 234ms computed bindings in 0ms putting module-based worker hello-denoflare... (539bytes) (308bytes compressed) put script hello-denoflare in 1136ms
ここでCloudflareのダッシュボードみると
hello-denoflareのworkersができていることがわかります。
また、↓のようにすれば別の名前をつけることもできます。
% denoflare push ＜.denoflareでのscriptの名前＞ --name ＜Workersでつけたい名前＞
ただ、pushしただけだとアクセスできないので、
Workersのトリガーで、ルートを有効にする必要があります。
ちなみに、denoflare push時に --watch をつけると、
スクリプトファイルが変更されるタイミングで自動的にpushしてくれます。
denoflare tail
denoflare tailコマンドを使うと、
CloudflareにあるWorkerのログストリームを表示してくれます。
% denoflare tail hello-denoflare --format pretty creating tail... Connected! Streaming logs from mydenoflare... (ctrl-c to quit) [2022-06-03 11:12:32] [KIX] [Ok] GET https://mydenoflare.classmthod-nakamura-shuta.workers.dev/?name=syuta | [res] 200 [2022-06-03 11:12:32] [KIX] [Ok] GET https://mydenoflare.classmthod-nakamura-shuta.workers.dev/favicon.ico
format json(デフォルト）にするとけっこうな量のログが出るので注意。
その他機能
Denoflareには他にも便利な機能があります。
denoflare siteコマンドを使うと、
静的なドキュメントをCloudflare Pagesでホストすることができます。
あとはdenoflare r2でR2操作（バケットの操作とかファイルのアップロード・ダウンロードとか）
もできます。
使い方については各種ドキュメントをご確認ください。
Summary
今回はCloudflare WorkersをTypescriptで簡単に管理するためのCLIツール、
Denoflareについて紹介しました。
TypeScriptでWorkersを書く場合、簡単に使えていい感じです。
Wranglerと適宜使い分けながらWorkers管理をしていきましょう。
![[Bun] JavaScriptでC言語のファイルを簡単に実行する](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-8c6d505db5519c426a9f992bfb37e1a0/753887f068b49792ca4f521aa8f565dd/eyecatch_bun_1200x630.png)
